<script setup lang="ts">
import { inject, onMounted, ref, watch } from 'vue'
import { postWithAns } from '@renderer/api/http'
import API from '@renderer/api/constant'
import { useControlGlobalModal } from '@renderer/layout/hooks/useControlGlobalModal'
import { GlobalNotification } from '@renderer/components/Toast/GlobalNotification'

interface Tree {
  id: number
  level: number,
  patientName?: string,
  patientId?: string,
  labelValue?: string,
  type?: string,
  reconstructFlag?: boolean,
  imgAddress?: {
    studyUID: string,
    seriesUID: string
  },
  children?: Tree[]
}

const { exportChooseVisibleRef, historyImgModalVisibleRef, showHistoryPatientIds } = inject('patients') as any

const getChoosePatientInfo = async () => {
  dataSource.value = await postWithAns(API.getImgHistoryByPatientList, null, {
    patientIDList: showHistoryPatientIds.value
  }) as any
}
const dataSource = ref<Tree[]>([])

const handleOpen = () => {
  getChoosePatientInfo()
}


const handleExport = () => {
  exportChooseVisibleRef.value = true
}

const handleClose = () => {
  historyImgModalVisibleRef.value = false
}
const treeRef = ref<any>()

const handleDelete = async () => {
  const ids = treeRef.value.getCheckedKeys(true, false)
  await postWithAns(API.deleteImgById, () => {
    GlobalNotification({
      message: '删除成功',
      type: 'success'
    })
  }, ids)
}
const {
  globalImgContainerRef
} = useControlGlobalModal()
const showImg = (data) => {
  globalImgContainerRef.value.showFlag = true
  // console.log(data)
}

const filterCondition = ref({
  scout: false,
  helical: false,
  fault: false
})

const onChange = (key) => {
  const newVal = !filterCondition.value[key]
  filterCondition.value[key] = newVal
  for (const eachKey of Object.keys(filterCondition.value)) {
    if (newVal && key !== eachKey) {
      filterCondition.value[eachKey] = false
    }
  }
}

watch(filterCondition, (newVal) => {
  if (newVal.scout) {
    treeRef.value!.filter('scout')
  } else if (newVal.fault) {
    treeRef.value!.filter('fault')
  } else if (newVal.helical) {
    treeRef.value!.filter('helical')
  }else {
    treeRef.value!.filter('')
  }
}, {
  deep: true
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.level === 3 && data.type.includes(value)
}
</script>

<template>
  <el-dialog
    title="历史影像"
    width="900"
    align-center
    destroy-on-close
    @open="handleOpen"
  >
    <template #default>
      <div class="mb-[20px]">
        <el-check-tag v-for="(val,key) in filterCondition"
                      :checked="val" @change="onChange(key)">{{ key }}
        </el-check-tag>
      </div>

      <el-card>
        <el-tree
          ref="treeRef"
          class="h-[350px] overflow-auto"
          :data="dataSource"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
        >
          <template #default="{ node, data }">
            <div class="w-[500px]">
                        <span v-if="data.level === 1" class="text-xl">
              {{ data.patientName }},{{ data.patientId }}
            </span>
              <span v-else-if="data.level === 2">
                {{ data.labelValue }}
            </span>
              <span v-else-if="data.level === 3" class="flex justify-between">
              <span class="w-[200px] truncate"> {{ data.labelValue }}</span>
              <span class="font-bold ml-[50px]">{{ data.type }}</span>
              <span class="w-[100px]">{{ data.desc }}</span>
              <el-button size="small" type="primary" @click="showImg(data)">查看</el-button>
          </span>
            </div>
          </template>
        </el-tree>
      </el-card>

    </template>

    <template #footer>
      <el-button type="warning" @click="handleDelete">删除</el-button>
      <el-button @click="handleExport">导出</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

</style>
